<template>
   <div>
	   <!--面包屑区域-->
	   <el-breadcrumb separator-class="el-icon-arrow-right">
	     <el-breadcrumb-item :to="{ path: '/adminHome/center' }">首页</el-breadcrumb-item>
	     <el-breadcrumb-item>营销管理</el-breadcrumb-item>
	     <el-breadcrumb-item>促销内容</el-breadcrumb-item>
	   </el-breadcrumb>
	   <!--卡片视图-->
	   <el-card >
		   <el-row :gutter="20">
		   <el-col :span="7" >
		   	<el-input placeholder="请输入优惠ID"  v-model="searchQuery">
		   	<el-button slot="append" icon="el-icon-search" @click="handleSearch()" >搜索</el-button>
		   	</el-input>
		   </el-col>
			<el-col :span="4">
				<el-button type="primary" @click="dialogVisible = true ">添加促销内容</el-button>
			</el-col>
			<el-col :span="4">
				<el-button type="primary" @click="listpromotions">促销活动列表</el-button>
			</el-col>
			</el-row>
	   </el-card>
	   <!--表格-->
	     <el-table
	       :data="tableData"
	       style="width: 100%"
	       max-height="250">
	       <el-table-column
	         fixed
	         prop="promotionID"
	         label="促销编号"
	         width="180">
	       </el-table-column>
	       <el-table-column
	         prop="promotionName"
	         label="促销名"
	         width="150">
	       </el-table-column>
	       <el-table-column
	         prop="details"
	         label="详细信息"
	         width="200">
	       </el-table-column>
	       <el-table-column
	         prop="startDate"
	         label="起始时间"
	         width="200">
	       </el-table-column>
		   <el-table-column
		     prop="endDate"
		     label="中止时间"
		     width="200">
		   </el-table-column>
		   <el-table-column
		     prop="promotionTypeID"
		     label="优惠类别"
		     width="200">
		   </el-table-column>
	       <el-table-column
	         fixed="right"
	         label="操作"
	         width="100">
	         <template slot-scope="scope">
	           <el-button
				 @click="deleteRow(scope.row.promotionID)"
	             type="text"
	             size="small">
	             移除
	           </el-button>
	         </template>
	       </el-table-column>
	     </el-table>
	   <!--文本框-->
	   <el-dialog
	     title="添加订单信息"
	     :visible.sync="dialogVisible"
	     width="40%">
		 <el-form :label-position="labelPosition" label-width="80px" :model="ruleForm" :rules="rules" ref="ruleForm">
		  <!-- <el-form-item label="促销编号" prop="promotionID">
		     <el-input v-model="ruleForm.name"></el-input>
		   </el-form-item> -->
		   <el-form-item label="促销名" prop="promotionName">
				<el-input v-model="ruleForm.promotionName"></el-input>
		   </el-form-item>
		   <el-form-item label="详细信息" prop="details">
		     <el-input v-model="ruleForm.details"></el-input>
		   </el-form-item>
		   <el-form-item label="上架时间"prop="startDate">
				<el-col :span="11">
				  <el-form-item prop="date1">
				    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.startDate" style="width: 100%;">
					</el-date-picker>
				  </el-form-item>
				</el-col>
		   </el-form-item>
		   <el-form-item label="中止时间"prop="data2">
		   				<el-col :span="11">
		   				  <el-form-item prop="date1">
		   				    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.endDate" style="width: 100%;">
		   					</el-date-picker>
		   				  </el-form-item>
		   				</el-col>
		   </el-form-item>
		   <el-form-item label="促销类别" prop="promotionTypeID">
		     <el-select v-model="ruleForm.promotionTypeID" placeholder="请选择">
		       <el-option label="折扣" value="1"></el-option>
		       <el-option label="满减" value="2"></el-option>
		   		 <el-option label="特价" value="3"></el-option>
		   		 <el-option label="代金券" value="4"></el-option>
		     </el-select>
		   </el-form-item>
		 </el-form>
	     <span></span>
	     <span slot="footer" class="dialog-footer">
	       <el-button @click="dialogVisible = false">取 消</el-button>
	       <el-button type="primary" @click="handleSubmit()">确 定</el-button>
	     </span>
	   </el-dialog>
	   
   </div>
   
</template>
<script>
	export default{
		name: 'HomeView',
		components: {
		
		},
		data(){
			return {
				
				searchQuery:'',
				
				ruleForm: {
					promotionID:'',
					promotionName: '',
					details: '',
					startDate: '',
					endDate: '',
					promotionTypeID:''
				},
				
			        goods: 5,
					dialogVisible:false,
					labelPosition: 'right',
			        form:{
						name: '',  
						category: '', 
						sale: '',  
						data1: '',
						data2:'',
						data3:''
			        },
					rules:{  
					      name: [  
					                { required: true, message: '请输入促销编号', trigger: 'blur' }  
					              ],  
					              category: [  
					                { required: true, message: '请选择促销名', trigger: 'change' }  
					              ],  
					              sale: [  
					                { required: true, message: '请输入详细信息', trigger: 'blur' }  
					              ],  
					              data1: [  
					                { type: 'date', required: true, message: '请选择起始时间', trigger: 'change' }  
					              ],  
					              data2: [  
					                { type: 'date', required: true, message: '请选择中止时间', trigger: 'change' },
									{  
									    validator: (rule, value, callback) => {  
									    const startDate = this.form.data1;  
									    if (!startDate) {  
									        callback(new Error('请先选择起始时间'));  
									        return;  
											}  
									        if (value && new Date(value) <= new Date(startDate)) {  
									     callback(new Error('中止日期必须大于起始日期'));  
									        } else {  
									        callback();  
									        }  
									},
									trigger: 'change'
									}
									
					              ],  
					              data3: [  
					                { required: true, message: '请输入优惠类别', trigger: 'blur' },
									 {  
									             validator: (rule, value, callback) => {  
									               if (!value || (value < 1 || value > 3)) {  
									                 callback(new Error('优惠类别必须在1-3之间'));  
									               } else {  
									                 callback();  
									               }  
									             },  
									             trigger: 'blur'  
									           }  
					              ]  
					},  
					tableData:[]
			      };
		},
		methods: {
			
			handleSearch() {
				
				let params = {
				    promotionID: this.searchQuery 
				};  
				
					this.axios.get("PromotionsSearchById",{params:params})
					.then(
						response=>{
							this.tableData=response.data.data;
							console.log(this.tableData)
							if (response.data.code === 200) {
								this.$message({
								  message: response.data.message,  
								  type: 'success'  
								});  
								
							}else{
								this.$message({
								  message: response.data.message,  
								  type: 'warning' 
								  });  
							}
						}
					)
					.catch(error => {
					        console.error(error);  
					        this.$message({  
					        message: error.response.data.message,  
					        type: 'error'  
					        });  
					    });  
			},
			
			listpromotions(){
				this.axios.post('PromotionsList', {})
				.then(response => {
						this.tableData=response.data.data.list;
				 })
				.catch(error => {
				   console.error(error);
				 });
			},
			
		    deleteRow(id) {
		      this.axios.get("PromotionsRemove",{
		          params: {
		            promotionID: id
		          }
		        })
		      .then(
		      	response=>{
		      		this.listpromotions();
		      		console.log(response.data);
		      			this.$message.success('删除成功'); 
		      	}
		      )
		      .catch(error => {
		         console.error(error);
		       });
		    },
			
			handleSubmit() {  
			        
			         this.axios.post('/PromotionsAdd', this.ruleForm)
			        			
			        .then(response => {
			           console.log(response.data);
			        			 // this.getProductsInfo();
			        			  this.$message.success('添加成功'); 
			         })
			        			
			        			
			        .catch(error => {
			           console.error(error);
			         });
			},
			
			resetForm() {  
			      this.$refs.ruleForm.resetFields();   
			}
		},
			
	}
</script>

<style lang ="less" scoped>


</style>